<template>
	<view>
		<view class="list-container" v-if="showRectificationInformation">
			<!-- 整改完成时间 -->
			<view class="item">
				<view class="top-label">
					<view>整改完成时间</view>
					<view class="text-right">2024-12-10 12:02:30</view>
				</view>
			</view>
			<!-- 整改后照片 -->
			<view class="item">
				<view class="top-label" @click="retract(0)">
					<view>整改后照片</view>
					<view v-if="showBasicInformation[0].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[0].show">
					<view class="img-all">
						<view v-for="(item, index) in imgList" :key="index" @click="onPreviewImage(item, index)">
							<image :src="item.url" class="img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 整改报告单 -->
			<view class="item">
				<view class="top-label" @click="retract(1)">
					<view>整改报告单</view>
					<view v-if="showBasicInformation[1].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[1].show">
					<view class="img-all">
						<view v-for="(item, index) in imgList" :key="index" @click="onPreviewImage(item, index)">
							<image :src="item.url" class="img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 整改内容 -->
			<view class="item">
				<view class="top-label" @click="retract(2)">
					<view>整改内容</view>
					<view v-if="showBasicInformation[2].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="content-item" v-if="showBasicInformation[2].show" style="margin-left: 10rpx">无</view>
			</view>
			<!-- 审核结果 -->
			<view class="item item-bottom" v-if="isExamine.isExamine">
				<view class="top-label">
					<view class="requireStarBottom">审核结果</view>
					<view class="rectification">
						<view v-for="(item, index) in rectificationList" :key="index" @click="selectRectification(index)">
							<view :class="rectificationValue == index ? 'rectification-item-action' : 'rectification-item'">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view v-if="rectificationValue == 1" class="info">
					<view class="">
						<view style="display: flex; flex-direction: column; margin-bottom: 150rpx">
							<view class="zheng-gai-zi">审核意见:</view>
							<view class="zi-bottom textAreaBox">
								<uv-textarea v-model="value" maxlength="200" count placeholder="请输入内容"></uv-textarea>
								<view class="fontCount" @click="showSpeech">
									<view><image :src="imgMinioPath + '/law/yuyin.png'"></image></view>
									<view></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 审核信息 -->
			<view class="item" v-if="showShenInformation.showShenInformation">
				<view class="top-label">
					<view>审核信息</view>
				</view>
				<view class="info">
					<view class="row">
						<view class="title">审核结果:</view>
						<view class="con">{{ '审核结果' }}</view>
					</view>
					<view class="row">
						<view class="title">审核时间:</view>
						<view class="con">{{ ' 审核时间' }}</view>
					</view>
					<view class="row">
						<view class="title">审核人:</view>
						<view class="con">{{ '审核人' }}</view>
					</view>
				</view>
			</view>
			<view class="check-bottom-box" @click.stop v-if="isExamine.isExamine">
				<button class="sure-button" @click.stop="submit()">确认</button>
			</view>
		</view>
		<view v-else>
			<view class="tabel-no-data list-no">
				<image src="@/static/image/noData.png" class="no-data"></image>
				<view>暂无数据</view>
			</view>
		</view>
		<speech-recognition ref="refSpeech" @getSpeeckInfo="getSpeeckInfo"></speech-recognition>
	</view>
</template>

<script setup>
import speechRecognition from '@/packageDailyCheck/components/speechRecognition.vue';
import { ref, reactive, toRefs, defineProps } from 'vue';
import config from "@/common/config";
let imgMinioPath = ref(config.IMG_MINIO_PATH);

const props = defineProps({
	isExamine: {
		type: Boolean,
		default: false
	},
	showShenInformation: {
		type: Boolean,
		default: true
	}
});
// 是否显示审核结果
const isExamine = toRefs(props);
// 是否显示审核信息
const showShenInformation = toRefs(props);
const value = ref('');
const showBasicInformation = reactive([{ show: true }, { show: true }, { show: true }]);
// 收起  打开
function retract(index) {
	showBasicInformation[index].show = !showBasicInformation[index].show;
}
// 整改信息是否有数据
const showRectificationInformation = ref(true);
// 审核结果选中
const rectificationValue = ref(0);
const rectificationList = ref([
	{ name: '通过', value: 1 },
	{ name: '不通过', value: 0 }
]);
function selectRectification(index) {
	rectificationValue.value = index;
}
const imgList = ref([
	{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
	{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
	{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }
]);
// 图片预览
let onPreviewImage = (item, index) => {
	let photoList = imgList.value.map((item) => {
		return item.url;
	});
	uni.previewImage({
		// 先filter找出为图片的item，再返回filter结果中的图片url
		urls: photoList,
		current: index
	});
};
const numbersCheck = ref('0');
// 审核意见
function textareaValue() {
	var txtVal = value.value.length;
	numbersCheck.value = txtVal;
}

//语音输入
const refSpeech = ref();
const showSpeech = () => {
	refSpeech.value.open();
};

function getSpeeckInfo(val) {
	value.value += val;
}
// 整改审核确认
function submit() {
	// 审核结果通过
	if (rectificationValue.value == 0) {
		uni.showToast({
			icon: 'success',
			title: '审核成功'
		});
		// 审核意见未填写
	} else if (rectificationValue.value == 1 && value.value == '') {
		uni.showToast({
			icon: 'none',
			title: '请输入审核不通过原因'
		});
	}
}
</script>

<style lang="scss" scoped>
@import '@/static/css/dailycheck/viewIndex.scss';

.textAreaBox {
	position: relative;
}

.fontCount {
	position: absolute;
	bottom: 2px;
	right: 130rpx;
	color: #9e9e9e;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	// z-index: 9999;
	image {
		height: 50rpx;
		width: 50rpx;
	}
}

.list-no {
	height: 80vh;
	margin-left: 5%;
	margin-right: 5%;
	border-radius: 20rpx;
	background-color: #fff;
}

::v-deep .requireStarBottom {
	width: 23%;
	position: relative;
}

::v-deep .requireStarBottom:after {
	position: absolute;
	right: 0;
	vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
	content: ' *';
	color: rgba(255, 59, 48, 1);
	font-size: 100%;
}
::v-deep.uv-textarea__field {
	text-align: left !important;
}
.rectification {
	display: flex;
	grid-gap: 20rpx;

	.rectification-item-action {
		width: 82rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: rgba(51, 117, 246, 0.698);
		border-radius: 2px;
		font-size: 24rpx;
	}

	.rectification-item {
		background: #cccccc;
		@extend .rectification-item-action;
	}
}
</style>
